<%--
  Created by IntelliJ IDEA.
  User: 86187
  Date: 2021/10/21
  Time: 10:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="resource/css/bootstrap.css">
    <script src="resource/js/jquery-3.2.1.js"></script>
    <script src="resource/js/bootstrap.js"></script>
    <script src="resource/My97DatePicker/WdatePicker.js"></script>
    <title>添加订单</title>

</head>
<body>
<form action="add" method="post">
    <input name="orderId" value="${orderId}" type="hidden">
    <table class="table table-hover">
        <thead>
        <tr>
            <th scope="col">订单编号：${orderId} </th>
        </tr>
        </thead>


        <thead>
        <tr>
            <th scope="col">商品名称</th>
            <th scope="col">商品价格</th>
            <th scope="col">图片</th>
            <th scope="col">生产日期</th>
            <th scope="col">商品库存</th>
            <th scope="col">备注</th>
            <th scope="col">购买商品数量</th>
            <th scope="col"><input type="button" value="+" onclick="addTr()"></th>
        </tr>
        </thead>
        <tbody id="tbody">
        <tr>
            <th scope="col"><input name="goodsList[0].goodsName"></th>
            <th scope="col"><input name="goodsList[0].goodsPrice" ></th>
            <th scope="col"><input name="file"  type="file" onchange="upFile('goodsList[0].goodsPicture',this)"><input type="hidden" name="goodsList[0].goodsPicture"> </th>
            <th scope="col"><input readonly="readonly" onclick="WdatePicker()" name="goodsList[0].goodsDate" ></th>
            <th scope="col"><input name="goodsList[0].goodsTotal" ></th>
            <th scope="col"><input name="goodsList[0].goodsMark" ></th>
            <th scope="col"><input name="goodsList[0].buyNum" ></th>
            <th scope="col"><input type="button" value="-" onclick="delTr(this)"></th>
        </tr>
        </tbody>
    </table>
    <th scope="col"><input type="submit" value="提交"></th>

</form>

<script>
    /*function uploadFile(wz,thiz){
        var formData = new FormData();
        formData.append("file",thiz.files[0]);
        $.ajax({
            url:"uploadFile",
            data:formData,
            type:"post",
            contentType:false,
            processData:false,
            success:function(url){
                if(url !=null && url !=""){//后端验证
                    $("[name='"+wz+"']").val(url);
                    $("[name='"+wz+"']").after('<img src="'+url+'" height="50px" width="50px">')
                }else{
                    alert("请选择.png gif...格式的图片");
                    $("[name='"+wz+"']").val("");//清空图片地址
                    $("img").remove();//删除img标签
                }
            }
        })
    }*/

    function upFile(wz,thiz){
        var formData = new FormData();
        formData.append("file",thiz.files[0]);
        $.ajax({
            url:"/upFile",
            data:formData,
            type:"post",
            contentType:false,
            processData:false,
            success:function(url){
                if(url !=null && url !=""){//后端验证
                    $("[name='"+wz+"']").val(url);
                    $("[name='"+wz+"']").after('<img src="'+url+'" height="50px" width="50px">')
                }else{
                    alert("请选择.png gif...格式的图片");
                    $("[name='"+wz+"']").val("");//清空图片地址
                    $("img").remove();//删除img标签
                }
            }
        })
    }

    var i=1;
    function addTr(){
        $("#tbody").append(' <tr>\n' +
            '                <th scope="col"><input name="goodsList['+i+'].goodsName"></th>\n' +
            '                <th scope="col"><input name="goodsList['+i+'].goodsPrice" ></th>\n' +
            '                <th scope="col"><input name="file"  type="file" onchange="upFile(\'goodsList['+i+'].goodsPicture\',this)"><input type="text" name="goodsList['+i+'].goodsPicture"> </th>\n' +
            '                <th scope="col"><input readonly="readonly" onclick="WdatePicker()" name="goodsList['+i+'].goodsDate" ></th>\n' +
            '                <th scope="col"><input name="goodsList['+i+'].goodsTotal" ></th>\n' +
            '                <th scope="col"><input name="goodsList['+i+'].goodsMark" ></th>\n' +
            '                <th scope="col"><input name="goodsList['+i+'].buyNum" ></th>\n' +
            '                <th scope="col"><input type="button" value="-" onclick="delTr(this)"></th>\n' +
            '            </tr>');
        i++;
    }

    function delTr(thiz){
        $(thiz).parent().parent().remove();
    }

</script>
</body>
</html>
